<script lang="ts" setup>
import { defineProps } from 'vue';
import { useCampStore } from '@/stores/CampDetailStore';
import router from '@/router';

// 定义接收的属性（基于修改后的字段）
const props = defineProps({
  campId: String, // 训练营ID
  campName: String, // 训练营名称
  organizerInfo: String, // 举办方信息
  coverImage: String, // 封面图片
  tags: String, // 标签信息
  startTime: String, // 开始时间，ISO 格式的时间字符串
  endTime: String, // 结束时间，ISO 格式的时间字符串
});

// 定义时间格式化方法
const formatTime = (time: string) => {
  return new Date(time).toLocaleDateString();
};
// 获取 Pinia store 实例
const CampStore = useCampStore();
// 操作按钮的事件处理
const startLearning = () => {
  // 将props中的数据保存到 Pinia 状态管理中
  CampStore.setTrainingInfo({
    campId: props.campId || '',
    campName: props.campName || '',
    organizerInfo: props.organizerInfo || '',
    coverImage: props.coverImage || '',
    tags: props.tags || '',
    startTime: props.startTime || '',
    endTime: props.endTime || '',
  });

  // 页面跳转
  router.push(`/personalSpace/trainingDetail/${props.tags}`);
};

// 鼠标移入时设置 body 背景为灰色
const handleMouseOver = () => {
  document.body.style.backgroundColor = '#f0f0f0'; // 设置灰色背景
};

// 鼠标移出时恢复 body 背景颜色
const handleMouseOut = () => {
  document.body.style.backgroundColor = ''; // 恢复默认背景颜色
};
</script>

<template>
  <div
    class="work-card"
    @click="startLearning"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
  >
    <!-- 左侧图片 -->
    <img :src="coverImage || 'https://via.placeholder.com/100'" alt="训练营图片" class="work-card-image">

    <!-- 右侧信息 -->
    <div class="work-card-content">
      <!-- 训练营名称 -->
      <div class="work-card-title">
        {{ campName }}
      </div>
      <!-- 时间信息 -->
      <div class="work-card-time">
        时间：{{ formatTime(startTime!) }} - {{ formatTime(endTime!) }}
      </div>
      <!-- 举办方信息 -->
      <div class="work-card-partner">
        举办方：{{ organizerInfo }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.work-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 5%;
  margin-bottom: 0rem;
  flex-direction: row;
  text-align: center;
}

.work-card-image {
  width: 30%;
  height: auto;
  object-fit: cover;
  border-radius: 10%;
  margin-bottom: 0rem;
}

/* 右侧内容样式 */
.work-card-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.work-card-title,
.work-card-partner,
.work-card-time {
  margin-bottom: 0.1rem;
}

/* 标题样式 */
.work-card-title {
  font-size: 1.2rem;
  font-weight: bold;
}

.work-card-partner,
.work-card-time {
  font-size: 0.9rem;
  color: #999;
}
</style>
